<!DOCTYPE html>
<html style="height:100%;">

<head>
  <meta charset="utf-8">
  
  <!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.4.0/echarts.min.js"></script> -->
  <!-- <script src="./china.js"></script> -->

</head>

<body>
  <div class="app">
    <div id="box" style="width: 800px; height: 800px;"></div>
  </div>
  
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script>
    $(function () {
      function addScriptTag(src) {
      var script = document.createElement('script');
      script.setAttribute("type", "text/javascript");
      script.src = src;
      document.head.appendChild(script);
    }
    function handleEcharts() {
      // 初始化echarts实例
      var myEcharts = echarts.init(document.getElementById("box"));
      var option = {
        // title: {  //标题样式
        //   text: '',
        //   x: "center",
        //   textStyle: {
        //     fontSize: 18,
        //     color: "red"
        //   },
        // },
        // tooltip: {  //这里设置提示框
        //   trigger: 'item',  //数据项图形触发
        //   backgroundColor: "#fff",  //提示框浮层的背景颜色。
        //   //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
        //   formatter: '{b}石家庄RDC',
        //   position: [800, 100],
        //   textStyle:{
        //     color:"#333"
        //   },
        //   extraCssText: 'box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); width:200px;text-align:center;'
        // },
        visualMap: {//视觉映射组件
          show:false,
          top: 'center',
          left: 'left',
          min: 100,
          max: 500,
          text: ['High', 'Low'],
          realtime: false,  //拖拽时，是否实时更新
          calculable: true,  //是否显示拖拽用的手柄
          inRange: { // 选中范围的视觉配置
            color: ['white', '#ddd', '#4f81c7'],
            symbolSize: [30, 100]
          }
        },
        series: [
          {
            name: '模拟数据',
            type: 'map',
            mapType: 'china',
            roam: false,//是否开启鼠标缩放和平移漫游
            itemStyle: {//地图区域的多边形 图形样式
              normal: {//是图形在默认状态下的样式
                label: {
                  show: true,//是否显示标签
                  textStyle: {
                    color: "black"
                  }
                }
              },
              emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                areaColor: '#4f81c7',
              },
              zoom: 1.5,  //地图缩放比例,默认为1
              label: true
            },
            top: "3%",//组件距离容器的距离
            data: [
              { name: '河北', value: 300 },
              { name: '重庆', value: 100 },
              { name: '河南', value: 100 },
              { name: '云南', value: 100 },
              { name: '辽宁', value: 100 },
              { name: '黑龙江', value: 100 },
              { name: '湖南', value: 100 },
              { name: '安徽', value: 100 },
              { name: '山东', value: 100 },
              { name: '新疆', value: 100 },
              { name: '江苏', value: 300 },
              { name: '浙江', value: 300 },
              { name: '江西', value: 100 },
              { name: '湖北', value: 300 },
              { name: '广西', value: 100 },
              { name: '甘肃', value: 100 },
              { name: '山西', value: 100 },
              { name: '内蒙古', value: 100 },
              { name: '陕西', value: 100 },
              { name: '吉林', value: 100 },
              { name: '福建', value: 100 },
              { name: '贵州', value: 100 },
              { name: '广东', value: 300 },
              { name: '青海', value: 100 },
              { name: '西藏', value: 100 },
              { name: '四川', value: 100 },
              { name: '宁夏', value: 100 },
              { name: '海南', value: 100 },
              { name: '台湾', value: 100 },
              { name: '香港', value: 100 },
              { name: '澳门', value: 100 }
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myEcharts.setOption(option);
    }

    $.getScript("https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js",function(data,textStatus,jqxhr){
      console.log(jqxhr.status);
      if(jqxhr.status==200){
        $.getScript('https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045',function (data,textStatus,jqxhr) { 
          if(jqxhr.status==200){
            handleEcharts()
          }
        })
      }
    })

    })
    

   


  </script>
</body>

</html>